<template>
    <div class="m-hmsrch">
        <search-box @input="input" @enter="enter" @focus="focus" ref="input_box"></search-box>
        <search-default v-if="searchStatus == 'default'"></search-default>
        <search-recom v-if="searchStatus == 'recom'">
            <template v-slot:title>{{keyword}}</template>
            <ul v-if="searchRecom.length !== 0">
                <li
                    class="recomitem"
                    v-for="item in searchRecom"
                    :key="item.keyword"
                    @click="search(item.keyword)"
                >
                    <i class="u-svg u-svg-search"></i>
                    <span class="f-bd f-bd-btm f-thide">{{item.keyword}}</span>
                </li>
            </ul>
            <div v-else class="no-state">没有数据</div>
        </search-recom>
        <search-result
            v-if="searchStatus == 'result'"
            :multimatch="multimatch"
            :songList="songList"
        ></search-result>
    </div>
</template>

<script>
import { getSearchRecom, get_search_result, getmultimatch, add_search_history } from "@/api";
import searchBox from "@/components/search/search-box.vue";
import searchDefault from "@/components/search/search-default.vue";
import searchRecom from "@/components/search/search-recom.vue";
import searchResult from "@/components/search/search-result.vue";
export default {
    data() {
        return {
            searchRecom: [],
            keyword: "",
            multimatch: {},
            songList: []
        };
    },
    computed: {
        searchStatus() {
            let state;
            if (
                (Object.keys(this.multimatch).length !== 0) |
                (this.songList.length != 0)
            ) {
                state = "result";
            } else if (this.keyword !== "") {
                state = "recom";
            } else {
                state = "default";
            }
            return state;
        }
    },
    methods: {
        // 搜索框输入时
        input(query) {
            this.keyword = String(query);
            //获取搜索建议
            if (query) {
                getSearchRecom(query).then(res => {
                    res = res.data.result.allMatch;
                    if (res) {
                        this.searchRecom = res;
                    } else {
                        this.searchRecom = [];
                    }
                });
            }
        },
        // 搜索框回车时
        enter(query) {
            this.keyword = String(query);
            if (query) {
                // 获取综合搜索结果（mv,歌手）
                getmultimatch(query).then(res => {
                    res = res.data.result;
                    this.multimatch = res;
                });
                // 获取搜索结果
                get_search_result(query).then(res => {
                    res = res.data.result.songs;
                    this.songList = res;
                });
                // 将搜索结果添加到localstorage中
                add_search_history(query);
            }
        },
        
        // 搜索框获得焦点时
        focus(query) {
            this.multimatch = {};
            this.songList = [];
            this.input(query);
        },
        // 搜索关键词
        search(keyword) {
            this.$refs.input_box.search(keyword);
        }
    },
    components: {
        searchBox,
        searchDefault,
        searchRecom,
        searchResult
    }
};
</script>

<style lang="less" scoped>
.f-bd {
    position: relative;
}

.f-bd:after {
    position: absolute;
    z-index: 2;
    content: "";
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    border: 0 solid rgba(0, 0, 0, 0.1);
}
.f-bd-full:after {
    border-width: 1px;
}
.f-bd-btm:after {
    border-bottom-width: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .f-bd:after,
    .u-cover:after,
    .u-face:after {
        width: 150%;
        height: 150%;
        -webkit-transform: scale(0.666666);
        -ms-transform: scale(0.666666);
        transform: scale(0.666666);
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .f-bd:after {
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }
}
</style>